<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getUserList, removeUser } from '@/api/classroom';
import { showConfirmDialog, showToast } from 'vant';
import AddAssistent from './AddAssistent.vue';

const props = defineProps<{ courseId: string }>();
const assistantList = ref<any[]>([]);

const showAddStudent = ref(false);
const isManage = ref(false);  // 是否管理模式

const fetchAssistentList = async () => {
    const res = await getUserList(props.courseId, 1)
  if (res.code === 200) {
    assistantList.value = res.data || []
  } else {
    showToast('获取助教失败')
  }
};

const handleRemove = async (assistantId: string) => {
  try {
    await showConfirmDialog({
      message: '确认要取消该教师吗？'
    });
    await removeUser(props.courseId, assistantId);
    showToast('移除成功');
    fetchAssistentList(); // 刷新
  } catch (err) {
    console.log(err);
    showToast('取消或失败');
  }
};
onMounted(() => {
    fetchAssistentList();
});
</script>

<template>
    <div class="student-list">
      <!-- 已有学生列表 -->
       <!-- 管理按钮 -->
    <div class="student-list-header">    
    <van-button 
    size="small" 
   @click="isManage = !isManage">
      {{ isManage ? '取消管理' : '管理教师' }}
    </van-button>
  </div>
      <van-cell
        v-for="assistant in assistantList"
        :key="assistant.id"
        :title="assistant.nickname"
        :label="assistant.studentId"
      >
        <template #icon>
          <van-image width="50" height="50" :src="assistant.avatar" fit="cover" round />
        </template>
        <template #extra v-if="isManage">
        <van-button 
        size="small" 
        type="danger" 
        @click="handleRemove(assistant.id)">移除</van-button>
      </template>
      </van-cell>
      <van-button type="primary" block @click="showAddStudent = true">
      添加助教
    </van-button>
    <!-- 添加教师弹窗 -->
    <AddAssistent
      v-model:show="showAddStudent"
      :courseId="props.courseId"
      @refreshAssistentList="fetchAssistentList"
    />
    </div>
  </template>

<style lang="scss" scoped>
.student-list-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.manage-btn {
  background-color: transparent;
  border: none;
  color: #1989fa;
  font-size: 14px;
  padding: 0;
  box-shadow: none;
}

.manage-btn:hover {
  opacity: 0.8;
}

.van-cell {
  margin-bottom: 10px;
}

.van-image {
  margin-right: 10px;
}

.add-student-container {
  margin-top: 20px;
  padding: 0 10px;
}
</style>
